<template>
    <div ref="pieChart" style="width: 80%;height:550px;padding: 27px 55px"></div>
</template>

<script setup>
    import {ref, reactive, onMounted, defineProps, watch} from 'vue';
    import * as echarts from 'echarts';

    const {chartTitle,data}=defineProps({//父传子参数
        chartTitle:{
            type:String
        },
        data:{
            type:Object
        }
    })
    const pieChart=ref()
    onMounted(()=>{
        initPieChart()
    })
    const option =reactive( {
        title:{//标题
            text:chartTitle||"农户贫困等级人数分布",//主标题
            left: "center",
        },
        legend: {
            top: 'bottom'
        },
        tooltip: {//鼠标放上去显示具体数据
            show:true,
            trigger: 'item',
            //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter:' {b}:{c}(人)<br/> {d}（%）'

        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: [30, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data:data
            }
        ]
    });

    const initPieChart=()=>{
        //初始化echarts实例
        if(pieChart.value){
            //, 'dark'
            let myChart = echarts.init(pieChart.value);
            //使用刚刚指定的配置项和数据显示图表
            myChart.setOption(option);
            //响应式图表自适应
            window.addEventListener('resize',()=>{
                myChart.resize();
            })
        }

    }

    watch(() => data, (newValue, oldValue) => {
        console.log(`yData的值从 ${JSON.stringify(oldValue)} 变为了 ${JSON.stringify(newValue)}`);
        initPieChart();
    }, {
        immediate: true,
        deep: true,
    });

</script>

<style scoped>

</style>